<template>
  <div class="main">
    <Nav />
    <div class="right_route">
      <div class="top_content">
        <el-button type="primary" @click="add_industry">添加行业</el-button>
        <el-button type="primary" @click="add_industry_type">添加业务类型</el-button>
      </div>
      <div class="right_content">
        <div class="left">
          <el-tabs v-model="active_index"  @tab-click="change_index"  type="border-card">
            <el-tab-pane :label="item.name" :name="index" v-for="(item, index) in infor_type_list"
              :key="index">
              <Table :list="list" />
            </el-tab-pane>
          </el-tabs>
        </div>
        <!-- <div class="table">
          <Table :list="list" />
        </div> -->
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, reactive } from 'vue'
import Nav from "@/components/public/nav.vue"
import Table from "@/components/maintenance/table.vue"
import { get_infor_type } from "@/request/api/information.ts"
import { change_industry, delete_industry } from "@/request/api/category.ts"
import { reload } from "@/utils/flushed"
// 选中的标签
let active_index = ref(0)
let infor_type_list: any = ref()
let list = ref([])
const get_infor_type_list = async () => {
  let { data } = await get_infor_type()
  infor_type_list.value = data
  dispose_data()
}
const change_index = (pane: any) => {
  active_index.value = pane.props.name
  dispose_data()
}
// 处理数据
const dispose_data = () => {
  let arr: any = []
  infor_type_list.value[active_index.value].children.forEach((item: any, index: any) => {
    console.log(item);
    item.new_children = ''
    arr.push(item)
    if (item.children.length > 0) {
      item.children.forEach((item2: any) => {
        item2.new_name = item2.name
        item2.name = ""
        item2.new_children = item2.children
        arr.push(item2)
      })
    }
  });
  list.value = arr
  console.log(list.value, " list.value");

}
const add_industry = () => {
  ElMessageBox.prompt('行业名称', '添加行业', {
    confirmButtonText: '保存',
    cancelButtonText: '取消',
    inputPattern: /\S/,
    inputErrorMessage: '请输入行业名称',
    inputPlaceholder: '请输入行业名称',
    beforeClose: async (action: any, instance: any, done: any) => {
      if (action == 'confirm') {
        console.log(instance.inputValue, "instance");

        let data: any = await change_industry({ name: instance.inputValue, parent_id: 0 })
        // check = true;
        if (data.code != 200)
          return ElMessage({
            message: data.message,
            type: 'error',
          });
        ElMessage({
          message: '操作成功',
          type: 'success',
        });
        done();
        reload()
      } else {
        //点击取消关闭
        done();
      }
    },
  });
}
const add_industry_type = () => {
  ElMessageBox.prompt('业务类型名称', '添加业务类型', {
    confirmButtonText: '保存',
    cancelButtonText: '取消',
    inputPattern: /\S/,
    inputErrorMessage: '请输入业务类型名称',
    inputPlaceholder: '请输入业务类型名称',
    beforeClose: async (action: any, instance: any, done: any) => {
      if (action == 'confirm') {
        console.log(instance.inputValue, "instance");

        let data: any = await change_industry({ name: instance.inputValue, parent_id: infor_type_list.value[active_index.value].id, style: 1 })
        // check = true;
        if (data.code != 200) return ElMessage({
          message: data.message,
          type: 'error',
        });
        ElMessage({
          message: '操作成功',
          type: 'success',
        });
        done();
        reload()
      } else {
        //点击取消关闭
        done();
      }
    },
  });
}
onMounted(() => {
  get_infor_type_list()
})
</script>

<style lang="scss" scoped>
.main {
  display: flex;


  .right_route {
    padding: 10px 20px 0 20px;
    flex: 1;
    box-sizing: border-box;
    background: rgba(#FFF, 1);
    width: calc(100vw - 200px);

    .top_content {
      text-align: right;
    }

    .right_content {
      margin-top: 20px;

      // .left {
      //   width: 200px;

      //   ul {
      //     li {
      //       height: 50px;
      //       box-sizing: border-box;
      //       text-align: center;
      //       // border-top: 1px solid #ebeef5;
      //       line-height: 50px;
      //       background: rgb(242, 242, 242);
      //       cursor: pointer;

      //       &.active_index {
      //         background: rgba(24, 145, 255, 1);
      //         color: #FFF;
      //       }
      //     }
      //   }
      // }

      .table {
        flex: 1;
      }
    }
  }
}
:deep(.el-tabs--border-card){
  border: none;
}
</style>